﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
  <link href="${ctx.resource}/css/shiftform.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <link href="${ctx.resource}/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  
  <title></title>

</head>

<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>

  <%@ include file="/WEB-INF/include/menu.jsp"%>
  
  <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

  <div class="container main-content">

    <div class="panel panel-default beast-panel beast-panel-layout">

      <div class="panel-heading">
        <ol class="breadcrumb">
          <li><a href="${ctx.host}/advertisement">统计管理</a></li>
          <li class="active">运营报表</li>
        </ol>
      </div>

      <div class="panel-body">

        <div class="col-xs-2 beast-panel-layout-left no-horizontal-padding">
          <%@ include file="/WEB-INF/include/submenu.jsp"%>
        </div>

        <div class="col-xs-10 beast-panel-layout-right">

          <div class="beast-breadcrumb-wrapper">
            <div class="beast-breadcrumb clearfix">
              <h2><i class="glyphicon glyphicon-fire" title="运营报表"></i>&nbsp;&nbsp;<span>运营报表&nbsp;-&nbsp;投放111广告统计</span></h2>
            </div>
          </div>
          
          
          
          
          <div class="col-xs-9 shadow-border">
				<div class="col-xs-12 clearfix">
					<div id="main" class="top-margin-20" style="height:300px"></div>	
					<div id="_main" class="top-margin-20" style="height:300px"></div>	
					<script type="text/javascript">
			        // 基于准备好的dom，初始化echarts图表
			        var myChart = echarts.init(document.getElementById('main')); 
			        
			        option = {
			        	title: {
			        		show: true,
			        		text: '推广数据'
			        	},
						    tooltip : {
						        trigger: 'axis'
						    },
						    legend: {
						        data:['阅读人数','覆盖人数','推广人数']
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    calculable : true,
						    dataZoom : {
						        show : true,
						        realtime : true,
						        start : 60,
						        end : 100
						    },
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : false,
						            data : function (){
						                var list = [];
						                for (var i = 1; i <= 30; i++) {
						                    list.push('2015-08-' + i);
						                }
						                return list;
						            }()
						        }
						    ],
						    yAxis : [
					        {
					            type : 'value',
	                    position: 'left',
	                    boundaryGap: [0,0.1],
	                    axisLabel : {
					                formatter: function (value) {
					                    // Function formatter
					                    return value + '人次'
					                }
					            },
					            axisLine : {    // 轴线
					                show: true,
					                lineStyle: {
					                    color: 'dark',
					                    type: 'solid',
					                    width: 2
					                }
					            }
					        },
					        {
				            type : 'value',
				            position: 'right',
				            splitNumber: 10,
				            axisLabel : {
				                formatter: function (value) {
				                    // Function formatter
				                    return value + '人'
				                }
				            },
				            splitLine : {
				                show: false
				            }
					        }
						    ],
						    series : [

						    		// 覆盖人数* 0.3 +- 0.05
						        {
						            name:'阅读人数',
						            type:'line',
						            smooth:true,
						            data:function (){
						                var list = [];
						                for (var i = 1; i <= 30; i++) {
						                    list.push(Math.round(Math.random()* 30));
						                }
						                return list;
						            }()
						        },

						        // 覆盖人数 = 认领Task的人数的 好友数 总和
						        {
						            name:'覆盖人数',
						            type:'line',
						            smooth:true,
						            yAxisIndex: 1,
						            data:function (){
						                var list = [];
						                for (var i = 1; i <= 30; i++) {
						                    list.push(Math.round(Math.random()* 100));
						                }
						                return list;
						            }()
						        },

						        // 认领Task的人数
						        {
						            name:'推广人数',
						            type:'line',
						            smooth:true,
						            data:function (){
						                var list = [];
						                for (var i = 1; i <= 30; i++) {
						                    list.push(Math.round(Math.random()* 10));
						                }
						                return list;
						            }()
						        }
						    ]
						};

			      // 为echarts对象加载数据 
			      myChart.setOption(option); 

			      
			      
		        // 基于准备好的dom，初始化echarts图表
		        var _myChart = echarts.init(document.getElementById('_main')); 
		        
		        var option = {
		            tooltip: {
		                show: true
		            },
		            legend: {
		                data:['销量']
		            },
		            xAxis : [
		                {
		                    type : 'category',
		                    data : ["投放广告1","投放广告2","投放广告3","投放广告4","投放广告5","投放广告6"]
		                }
		            ],
		            yAxis : [
		                {
		                    type : 'value'
		                }
		            ],
		            series : [
		                {
		                    "name":"销量",
		                    "type":"bar",
		                    "data":[5, 20, 40, 10, 10, 20]
		                }
		            ]
		        };

		        // 为echarts对象加载数据 
		        _myChart.setOption(option); 
			        
			        
			    </script>
				</div>
				
				
        </div>

      </div>

    </div>

  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/shiftform.js"></script>
  <script src="${ctx.resource}/js/select2.min.js"></script>
  <script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>
  <script src="${ctx.resource}/js/bootstrap-datetimepicker.js"></script>
  <script src="${ctx.resource}/js/bootstrap-datetimepicker.zh-CN.js"></script>
  

</body>

</html>
